<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>

<html>

<head>

    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="description" content=""/>
    <meta name="author" content=""/>
	<meta name="_csrf" content="${_csrf.token}"/>
    <meta name="_csrf_header" content="${_csrf.headerName}"/>
    
    <title>HappyHome Admin</title>

    <!-- Bootstrap Core CSS -->
    <link href="<c:url value="/resources/admin/css/bootstrap.min.css"/>" rel="stylesheet"/>

    <!-- Custom CSS -->
    <link href="<c:url value="/resources/admin/css/sb-admin.css"/>" rel="stylesheet"/>

    <!-- Custom Fonts -->
    <link href="<c:url value="/resources/admin/font-awesome-4.1.0/css/font-awesome.min.css"/>" rel="stylesheet" type="text/css"/>

</head>

<body>
	<c:url value="/j_spring_security_logout" var="logoutUrl" />
	<form action="${logoutUrl}" method="post" id="logoutForm" style="display:none;">
		<input type="hidden" name="${_csrf.parameterName}"
			value="${_csrf.token}" />
	</form>
    <script>
		function formSubmit() {
			document.getElementById("logoutForm").submit();
		}
	</script>
	
    <div id="wrapper">

        <!-- Navigation -->
        <%@ include file="/WEB-INF/pages/admin/navigation.jsp" %>

        <div id="page-wrapper">

            <div class="container-fluid">

                <!-- Page Heading -->
                <div class="row">
                    <div class="col-lg-12">
                        <h1 class="page-header">
                            NEW ROOM
                        </h1>
                        <ol class="breadcrumb">
                            <li class="active">
                                <i class="fa fa-dashboard"></i> Dashboard
                            </li>
                        </ol>
                    </div>
                </div>
                <!-- /.row -->

                <div class="row">
                    <div class="col-lg-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h3 class="panel-title"><i class="fa fa-money fa-fw"></i> Configuration Parameter</h3>
                            </div><!-- panel-heading -->
                            <div class="panel-body">
                            	<div class="row">
                            		<form role="form" id="newParameterForm" method="post">
					                    <div class="col-lg-6 col-lg-offset-1">
											<div class="row">Order parameter</div>
					                    	<div class="row">
					                            <div class="form-group">
					                            	<div class="col-md-1">
					                                	<input class="form-control" value="1" disabled/>
					                                </div>
					                                <div class="col-md-5">
						                                <select class="form-control" name="firstOrder" id="firstOrder">
						                                	<c:forEach var="parameter" items="${listParameters }">
						                                		<c:if test="${parameter.order == 1}">
														   			<option value="${parameter.codePara}" selected="selected">${parameter.namePara}</option>
														  	 	</c:if>
														  	 	<c:if test="${parameter.order != 1}">
														   			<option value="${parameter.codePara}">${parameter.namePara}</option>
														  	 	</c:if>
						                                	</c:forEach>
						                                </select>
					                                </div>
					                                <div class="col-md-5">
					                                	<select class="form-control" name="firstOrderOccurrences" id="firstOrderOccurrences">
					                                		<c:forEach var="parameter" items="${listParameters }">
					                                			<c:if test="${parameter.order == 1}">
														   			<c:forEach begin="0" end="5" var="counter">
														   				<c:if test="${parameter.value == counter}">
														   					<option value="${counter}" selected="selected">${counter}</option>
														   				</c:if>
															   			<c:if test="${parameter.value != counter}">
														   					<option value="${counter}">${counter}</option>
														   				</c:if>
								                                	</c:forEach>
														  	 	</c:if>
					                                		</c:forEach>
						                                </select>
					                                </div>
					                            </div>
					                         </div>
					                         <br />
					                         <div class="row">
					                            <div class="form-group">
					                                <div class="col-md-1">
					                                	<input class="form-control" value="2" disabled/>
					                                </div>
					                                <div class="col-md-5">
						                                <select class="form-control" name="secondOrder" id="secondOrder">
														   <c:forEach var="parameter" items="${listParameters }">
						                                		<c:if test="${parameter.order == 2}">
														   			<option value="${parameter.codePara}" selected="selected">${parameter.namePara}</option>
														  	 	</c:if>
														  	 	<c:if test="${parameter.order != 2}">
														   			<option value="${parameter.codePara}">${parameter.namePara}</option>
														  	 	</c:if>
						                                	</c:forEach>
						                                </select>
						                            </div>
						                            <div class="col-md-5">
														<select class="form-control" name="secondOrderOccurrences" id="secondOrderOccurrences">
						                                	<c:forEach var="parameter" items="${listParameters }">
					                                			<c:if test="${parameter.order == 2}">
														   			<c:forEach begin="0" end="5" var="counter">
														   				<c:if test="${parameter.value == counter}">
														   					<option value="${counter}" selected="selected">${counter}</option>
														   				</c:if>
															   			<c:if test="${parameter.value != counter}">
														   					<option value="${counter}">${counter}</option>
														   				</c:if>
								                                	</c:forEach>
														  	 	</c:if>
					                                		</c:forEach>
						                                </select>
					                                </div>
					                            </div>
					                         </div>
					                         <br />
					                         <div class="row">
					                            <div class="form-group">
					                                <div class="col-md-1">
					                                	<input class="form-control" value="3" disabled/>
					                                </div>
					                                <div class="col-md-5">
						                                <select class="form-control" name="thirdOrder" id="thirdOrder">
														   <c:forEach var="parameter" items="${listParameters }">
						                                		<c:if test="${parameter.order == 3}">
														   			<option value="${parameter.codePara}" selected="selected">${parameter.namePara}</option>
														  	 	</c:if>
														  	 	<c:if test="${parameter.order != 3}">
														   			<option value="${parameter.codePara}">${parameter.namePara}</option>
														  	 	</c:if>
						                                	</c:forEach>
						                                </select>
						                            </div>
						                            <div class="col-md-5">
														<select class="form-control" name="thirdOrderOccurrences" id="thirdOrderOccurrences">
						                                	<c:forEach var="parameter" items="${listParameters }">
					                                			<c:if test="${parameter.order == 3}">
														   			<c:forEach begin="0" end="5" var="counter">
														   				<c:if test="${parameter.value == counter}">
														   					<option value="${counter}" selected="selected">${counter}</option>
														   				</c:if>
															   			<c:if test="${parameter.value != counter}">
														   					<option value="${counter}">${counter}</option>
														   				</c:if>
								                                	</c:forEach>
														  	 	</c:if>
					                                		</c:forEach>
						                                </select>
					                                </div>
					                            </div>
					                         </div>
					                         <br />
					                    </div><!-- /col-lg-6 -->
							           	<div class="col-lg-6 col-lg-offset-1">         
	                        				<button type="submit" class="btn btn-default">
	                        					<span class="glyphicon glyphicon-floppy-save"></span> 
												<spring:message code="message.SaveButton" text="default text" />
											</button>
											
				                            <button type="reset" class="btn btn-default">
				                            	<span class="glyphicon glyphicon-repeat"></span> 
				                            	<spring:message code="message.ResetButton" text="default text" />
											</button>
				                        </div><!-- /col-lg-12 --> 
                        			</form>
                    			</div><!-- /row -->
                			</div><!-- /panel-body -->
                         </div><!-- panel panel-default -->
                     </div><!-- col-lg-12 -->
                </div><!-- /row -->
            </div><!-- /container-fluid -->

          </div><!-- /page-wrapper -->

        </div><!-- /#wrapper -->
		<!-- Modal -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		  <div class="modal-dialog">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
		        <h4 class="modal-title" id="myModalLabel">
		        	<spring:message code="message.FormNotification" text="notification"/>
		        </h4>
		      </div>
		      <div class="modal-body">
		        	<p class="error-text" id="modal-body-notifycation"/>
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-primary" data-dismiss="modal">
		        	<spring:message code="message.closeButton" text="close"/>
		        </button>
		      </div>
		    </div>
		  </div>
		</div>
		<!-- /modal -->
	<!-- jQuery Version 1.11.0 -->
    <script src="<c:url value="/resources/admin/js/jquery-1.11.0.js"/>"></script>
    <!-- Bootstrap Core JavaScript -->
    <script src="<c:url value="/resources/admin/js/bootstrap.min.js"/>"></script>
    
    <!-- handle and validate choose parameter -->
    <script type="text/javascript">
	    $('#newParameterForm').submit(function( event ) {
			event.preventDefault(); 
			
			var theFirstOrderValue = $('#firstOrder').val();
			var firstOrderOccurrencesValue = $('#firstOrderOccurrences').val();
			var theSecondOrderValue = $('#secondOrder').val();
			var secondOrderOccurrencesValue = $('#secondOrderOccurrences').val();
			var theThirdOrderValue = $('#thirdOrder').val();
			var thirdOrderOccurrencesValue = $('#thirdOrderOccurrences').val();
			
			if((theFirstOrderValue === theSecondOrderValue) || (theSecondOrderValue === theThirdOrderValue) || (theThirdOrderValue === theFirstOrderValue)){
				alert('Duplicate Value, please choose againt');
			}else{
				var formData = new FormData();
				formData.append("theFirstOrderValue", theFirstOrderValue);
				formData.append("firstOrderOccurrencesValue", firstOrderOccurrencesValue);
				formData.append("theSecondOrderValue", theSecondOrderValue);
				formData.append("secondOrderOccurrencesValue", secondOrderOccurrencesValue);
				formData.append("theThirdOrderValue", theThirdOrderValue);
				formData.append("thirdOrderOccurrencesValue", thirdOrderOccurrencesValue);
				
				$.ajax({
		   			url: "${pageContext.request.contextPath}/admin/configureFormParametersSubmit",
		   			type:"POST",
		   			data: formData,
		   			dataType: 'text',
		   		    processData: false,
		   		    contentType: false,
			   		beforeSend: function (xhr){ 
			   	        xhr.setRequestHeader($("meta[name='_csrf_header']").attr("content"), $("meta[name='_csrf']").attr("content")); 
			   	    },
		   			success: function (response) {
		   				document.getElementById("modal-body-notifycation").innerHTML = '<i class="icon-ok-sign modal-icon"></i> Update successfully!';
		   				$("#myModal").modal('show'); 
		    		},
		   			error: function(jqXHR, textStatus, errorThrown){
		   				alert(textStatus);
		   			}
		   		});
			}
	   		event.unbind();
		});
    </script>
    <!-- / handle and validate choose parameter -->
</body>

</html>
